@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/public.css')}}">
<link rel="stylesheet" href="{{URL::asset('./css/suppliermy/store.css')}}">
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/info.css')}}">
<style type="text/css">
    .update_btn {
        display: inline-block;
        width: 90px;
        height: 30px;
        border: 0px;
        background: rgba(209, 0, 24, 1);
        border-radius: 2px;
        margin-left: 10px;
        position: relative;
        text-align: center;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 30px;
        color: #fff;
    }
</style>
@section('content')
<div class="mainHrContent" id="hrStore">
    <div class="storelistTitle" id="storelistTitle"  v-cloak>
        <span class="storelistTitle_left">
            <span>
                <img src="{{URL::asset('./img/icon/home.png')}}">
            </span>
            <span><a href="{{route('home.index.index') }}">首页</a> >
                <a href="{{route('home.suppliermy.supplierIndex') }}">供应商中心</a>
                > 店铺管理中心
            </span>
        </span>
        <!-- <span class="storelistTitle_right">
            <span>找不到合适的供应商？发个需求试试？</span>
            <button @click="window.location.href ='{{ route('home.demand.demandAdd')}}'">免费发布需求</button>
        </span> -->
    </div>
    <div class="hrContent">
        @include('home.suppliermy.menu')
        <div class="basicInfo" id="hrStores" :class="{noStore:store_status == 2 || store_status == 3 || store_status == 4}" v-cloak>
            <div v-if="store_status">
                <div v-if="store_status == 1 ||store_status == 5 ">
                    <div class="basicInfo_title">
                        <span></span>
                        店铺管理中心
                        <button><a :href="'{{route('home.suppliermy.supplierStoreEdit') }}?id='+storeData.id">修改</a></button>
                    </div>
                    <div class="userDetails">
                        <p style="align-items:end">
                            <span class="details_title">LOGO：</span>
                            <img :src="storeData.logo">
                        </p>
                        <p>
                            <span class="details_title">公司名称：</span>
                            @{{storeData.store_name}}
                        </p>
                        <p>
                            <span class="details_title">公司地址：</span>
                            @{{storeData.area_info}}
                        </p>
                        <p>
                            <span class="details_title">擅长领域：</span>
                            <!-- {{--<button v-for="(item,index) in cate_id" v-if="index<5">@{{item.name}}</button>--}} -->
                            <span v-for="(item,index) in cate_id" v-if="index<5">@{{item.name}}</span>
                        </p>
                        <p>
                            <span class="details_title">服务区域：</span>
                            <span v-for="(item,index) in storeData.service_area">@{{item.name}}、</span>
                        </p>
                        <p>
                            <span class="details_title">服务时间：</span>
                            @{{storeData.workingtime?storeData.workingtime[0] + '-'+ storeData.workingtime[1]:''}}
                        </p>
                        <p style="align-items:baseline">
                            <span class="details_title">公司简介：</span>
                            <span style="width: 607px;">
                                @{{storeData.description}}
                            </span>
                        </p>
                        <p style="align-items:end">
                            <span class="details_title">BANNER：</span>
                            <el-carousel style="width: 550px;" :interval="4000" type="card" height="180px">
                                <el-carousel-item v-for="(item,index) in banner" v-if="index<6"  :key="item">
                                    <img style="width:100%;height:100%" :src="item">
                                </el-carousel-item>
                            </el-carousel>
                        </p>
                        <p style="align-items:end">
                            <span class="details_title">图片展示：</span>
                            <el-carousel style="width: 550px;" :interval="4000" type="card" height="180px">
                                <el-carousel-item v-for="(item,index) in image" v-if="index<6"  :key="item">
                                    <img style="width:100%;height:100%" :src="item">
                                </el-carousel-item>
                            </el-carousel>
                        </p>
                        <p>
                            <span class="details_title">服务内容：</span>
                            <button v-for="item in services">@{{item.title}}</button>
                        </p>
                        <p style="align-items:baseline">
                            <span class="details_title">案例展示：</span>
                            <span style="width: 550px;display: flex; flex-direction: column;">
                                <span v-for="(item,index) in cases">@{{index+1}}、@{{item.title}}</span>
                            </span>
                        </p>
                        <p style="align-items:end">
                            <span class="details_title">合作伙伴：</span>
                            <el-carousel style="width: 550px;" :interval="4000" type="card" height="180px">
                                <el-carousel-item v-for="(item,index) in partners" v-if="index<6" :key="item">
                                    <img style="width:100%;height:100%" :src="item">
                                </el-carousel-item>
                            </el-carousel>
                        </p>
                    </div>
                </div>
                <div v-if="store_status == 2">
                    <img style="margin:0 auto;display:block" src="{{URL::asset('./img/icon/audit.png')}}">
                    <p style="text-align:center">店铺正在审核中 !</p>
                </div>
                <div v-if="store_status == 3">
                    <img style="margin:0 auto;display:block" src="{{URL::asset('./img/icon/audit2.png')}}">
                    <p style="text-align:center">请前往消息查看中心查看原因 !
                    <button class="update_btn"><a style="color:#fff" :href="'{{route('home.suppliermy.supplierStoreEdit') }}?id='+storeData.id">修改</a></button></p>
                </div>
                <div v-if="store_status == 4">
                    <img style="margin:0 auto;display:block" src="{{URL::asset('./img/icon/audit3.png')}}">
                    <p style="text-align:center">请前往消息查看中心查看原因 !
                    <button class="update_btn"><a style="color:#fff" :href="'{{route('home.suppliermy.supplierStoreEdit') }}?id='+storeData.id">修改</a></button></p>
                </div>
            </div>
            <div v-else>
                <div class="unstore">
                    <p>
                        <img src="{{URL::asset('./img/icon/unstore.png')}}">
                        您还未创建店铺，请创建店铺吧。
                    </p>

                    <button>
                        <a href="{{route('home.suppliermy.supplierStoreEdit') }}">创建店铺</a>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('compontentScipts')
<script>
    $(() => {
        let hrStore = new Vue({
            el: '#hrStores',
            data: () => {
                return {
                    store_status:'',
                    storeData: {},
                    partners:[],
                    image:[],
                    banner:[],
                    services:[],
                    cases:[],
                    cate_id:[],
                    store_id:'',
                }
            },
            created() {
                this.store_status = JSON.parse(sessionStorage.getItem("HRuserDetails")).store_status
                this.store_id = JSON.parse(sessionStorage.getItem("HRuserDetails")).store_id
                this.getData()
                this.getStore();
            },
            mounted() {},
            methods: {
                getData() {
                    let data = {}
                    apiAjax("{{ route('home.user.userInfoApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.store_status = res.data.store_status
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                getStore() {
                    let data = {}
                    apiAjax("{{ route('home.user.supplierStoreApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.storeData = res.data;
                            if(res.data){
                                this.image = res.data.image?res.data.image:[];
                                this.partners = res.data.partners?res.data.partners:[];
                                this.banner = res.data.banner ? res.data.banner:[];
                                this.services = res.data.services||[];
                                this.cases = res.data.cases||[];
                                this.cate_id = res.data.cate_id||[];
                            }

                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
            }
        })
    })
</script>
@endsection